import EchartsCom from '../../components/Echarts'
import '../../css/home/Home.scss'
import { Table } from 'antd';
const Index = () => {
  const columns = [
    {
      title: '日期',
      dataIndex: 'time'
    },
    {
      title: '人数',
      dataIndex: 'num'
    }
  ];
  const data = [
    {
      key: '1',
      time: '2022-06-01',
      num: 32
    },
    {
      key: '2',
      time: '2022-06-01',
      num: 32
    },
    {
      key: '3',
      time: '2022-06-01',
      num: 32
    },
]
const columnsType = [
    {
      title: '日期',
      dataIndex: 'timeType'
    },
    {
        title: '类型',
        dataIndex: 'type'
      },
    {
      title: '人数',
      dataIndex: 'numType'
    }
  ];
  const dataType = [
    {
      key: '1',
      timeType: '2022-06-01',
      type:'外来',
      numType: 10
    },
    {
        key: '2',
        timeType: '2022-06-01',
        type:'学生',
        numType: 12
      },
      {
        key: '3',
        timeType: '2022-06-01',
        type:'老师',
        numType: 10
      },
]
  return <>
    <div className="home">
      {/* 头部开始 */}
      <div className="home_head">
        <div className='home_box'>
          <div className='home_left1'>
            <p className='home_text'>今日访客</p>
            <p className='home_num'>20</p>
          </div>
          <div className='home_right'>
            <p className='home_people'>待审核：20人</p>
            <p className='people_small'>未通过：20 人 已取消：1 人</p>
          </div>
        </div>

        <div className='home_box'>
          <div className='home_left2'>
            <p className='home_text'>今日访客</p>
            <p className='home_num'>20</p>
          </div>
          <div className='home_right'>
            <p className='home_people'>待审核：20人</p>
            <p className='people_small'>未通过：20 人 已取消：1 人</p>
          </div>
        </div>

        <div className='home_box'>
          <div className='home_left3'>
            <p className='home_text'>今日访客</p>
            <p className='home_num'>20</p>
          </div>
          <div className='home_right'>
            <p className='home_people'>待审核：20人</p>
            <p className='people_small'>未通过：20 人 已取消：1 人</p>
          </div>
        </div>

        <div className='home_box'>
          <div className='home_left4'>
            <p className='home_text'>今日访客</p>
            <p className='home_num'>20</p>
          </div>
          <div className='home_right'>
            <p className='home_people'>待审核：20人</p>
            <p className='people_small'>未通过：20 人 已取消：1 人</p>
          </div>
        </div>

        <div className='home_box'>
          <div className='home_left5'>
            <p className='home_text'>今日访客</p>
            <p className='home_num'>20</p>
          </div>
          <div className='home_right'>
            <p className='home_people'>待审核：20人</p>
            <p className='people_small'>未通过：20 人 已取消：1 人</p>
          </div>
        </div>
      </div>

      {/* echarts图标开始 */}
      <div className='home_echarts'>
        <EchartsCom />
      </div>

      {/* 表格开始 */}
      <div className='home_table'>
        <div className='table_head'>本周详情</div>
        <div className='table_body'>
          <div className='table_box table_box1'>
            <span>本周人员统计表：</span>
            <Table
              columns={columns}
              dataSource={data}
              bordered
              pagination={false}
            />
          </div>
          <div className='table_box'>
            <span>本周人员申请类型表：</span>
            <Table
              style={{width:'400px'}}
              columns={columnsType}
              dataSource={dataType}
              bordered
              pagination={false}
            />
          </div>
        </div>
      </div>
    </div>
  </>
}

export default Index